<template>
  <el-table class="group-table"
    border
    :data="editorData"
    empty-text="请选择销售属性"
    style="width: 100%">
    <el-table-column
      align="center"
      prop="group"
      v-for="(item, index) in columData"
      :key="index"
      :label="item.attrName">
      <template scope="scope">{{scope.row.group[index]}}</template>
    </el-table-column>
    <el-table-column
      align="center"
      prop="price"
      label="价格（元）">
      <template scope="scope">
        <!-- <table-input-num autofocus :data="scope" type="price" @change="handleTableRowChange"/> -->
        <x-input-money class="input-block" v-model="scope.row.price" @change="handleTableRowChange('price', scope, $event)"/>
        <!-- <el-input-number class="input-block"
          :bit="0.01"
          v-model="scope.row.price"/> -->
      </template>
    </el-table-column>
    <el-table-column
      align="center"
      prop="num"
      label="数量（件）">
      <template scope="scope">
        <el-input-number class="input-block"
          :bit="1"
          v-model="scope.row.num"
          @change="handleTableRowChange('num', scope, $event)"/>
      </template>
    </el-table-column>
    <el-table-column
      align="center"
      prop="num"
      label="限购数量（件）">
      <template scope="scope">
        <el-input-number class="input-block"
          :validateEvent="!1"
          :bit="1"
          :max="scope.row.num"
          v-model="scope.row.linmitNum"
          @change="handleTableRowChange('linmitNum', scope, $event)"/>
      </template>
    </el-table-column>
    <!-- <el-table-column
      align="center"
      prop="buyState"
      label="购买状态">
      <template scope="scope">
        <el-select v-model="scope.row.buyState" placeholder="请选择">
          <el-option 
            v-for="item in [{value:1, label: '可购买'}, {value:2, label: '不可购买'}]"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </template>
    </el-table-column> -->
  </el-table>
</template>
<script>
  export default {
    props: {
      tableData: Array,
      columData: Array
    },
    watch: {
      tableData () {
        this.editorData = this.tableData
      }
    },
    data () {
      return {
        editorData: this.tableData
      }
    },
    methods: {
      handleTableRowChange (type, {row, $index}, newVal) {
        let newRow = Object.assign(row, {
          [type]: newVal
        })
        this.$set(this.editorData, $index, newRow)
        // console.log(this.editorData)
        this.$emit('change', this.editorData)
          .$emit('update:tableData', this.editorData)
          .$emit('el.form.change', this.editorData)
          .$emit('el.form.blur', this.editorData)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .group-table{
    border-left: 1px solid #f0f0f0;
    border-top: 1px solid #f0f0f0;
  }
</style>

<style lang="scss">
  .group-table.el-table{
    .cell{
      padding-left: 8px;
      padding-right: 8px;
    }
  }
</style>
